<template>
    <div class="mainDiv">
        <div class="rowHead">
            <el-button type="success" icon="plus" @click="add" v-qx="permission.addone">新增主分类</el-button>
        </div>
        <el-table :data="tableHost" :show-header="false" :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="unfold" :row-class-name="tableRowClassName" height="100%">
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <el-button size="small" icon="edit" class="mr" v-for="tablenext in tableNext" :key="tablenext.id" v-if="tablenext.pid === scope.row.id" @click="editcate($event,tablenext,2)">{{tablenext.name}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="name" width="200"></el-table-column>
            <el-table-column></el-table-column>
            <el-table-column width="300">
                <template scope="scope">
                    <el-button-group>
                        <el-tooltip content="新增二级分类" placement="left" :open-delay="800" v-qx="permission.addtwo">
                            <el-button type="success" size="small" icon="plus" @click="addcate($event,scope.row)">新增二级分类</el-button>
                        </el-tooltip>
                        <el-tooltip content="重命名当前主分类" placement="top" :open-delay="800" v-qx="permission.edit">
                            <el-button type="warning" size="small" icon="edit" @click="editcate($event,scope.row,1)">重命名当前主分类</el-button>
                        </el-tooltip>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import C from '#/src/common/common.js'
export default {
    name: 'categorylist',
    data() {
        return {
            tableHost: [],
            tableNext: [],
            expands: [],
            permission: {
                addone: 'category_addone',
                addtwo: 'category_addtwo',
                edit: 'category_edit',
            }
        }
    },
    mounted() {
        this.getmsg()
    },
    methods: {
        confirm(row, title, tips, msg) {
            this.$prompt(tips, title, {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^[^\s]+.*[^\s]+$/,
                inputErrorMessage: '对不起，您输入的分类名称不正确'
            }).then(async({ value }) => {
                row.name = value
                let res = await C.ajax('/organization/category/addedit', row, 'post')
                if (res) {
                    this.getmsg()
                    C.success(res.data)
                }
            })
        },
        add() {
            this.confirm({}, '新增项目主分类', '请输入需要新增项目主分类名称', '新增分类成功')
        },
        addcate(e, row) {
            this.confirm({ pid: row.id }, '新增“' + row.name + '”下次分类', '请输入需要新增项目分类名称', '新增分类成功')
            e.stopPropagation()
        },
        editcate(e, row, tp) {
            if (tp % 2) {
                this.confirm(row, '重命名项目主分类', '请输入主分类新名称', '更名成功')
                this.getmsg()
                // H.ajaxiframe('subjectcategory_editsubjectcategory.html',{id:id,name:name},400,164,'')
            } else {
                this.confirm(row, '重命名项目分类', '请输入分类新名称', '更名成功')
                this.getmsg()
                // H.ajaxiframe('subjectcategory_editsubjectcategory.html',{id:id,name:name},400,164,'重命名项目次分类')
            }
            e.stopPropagation()
        },
        async getmsg() {
            var that = this
            let data = await C.ajax('/organization/category/categorylist')
            if (data) {
                that.tableHost = data.p
                that.tableNext = data.c
                that.expands = JSON.parse(JSON.stringify(that.expands))
            }
        },
        //获取row的key值
        getRowKeys(row) {
            return row.id
        },
        unfold(row, expanded) {          
            this.expands = expanded.map(row => {
                return row.id
            })
        },
        tableRowClassName(row) {
            for (var i = 0; i < this.tableNext.length; i++) {
                if (this.tableNext[i].pid === row.row.id) {
                    return 'xianshi'
                }
            }
        }
    }
}
</script>
<style>
.el-table__expanded-cell {
    padding: 15px;
}

.el-table__expand-icon {
    display: none;
}

.xianshi .el-table__expand-icon {
    display: block !important;
}
</style>